<template>
  <div>
    <van-popup position="bottom" v-model="payShow" bind:close="onClose">
      <div class="pay">
        <div class="cash">￥ {{ acDetail.price }}元</div>
        <div class="ops">
          <van-radio-group v-model="radio" change="onChange">
            <van-radio name="1">微信支付</van-radio>
            <van-radio name="3" :disabled="acDetail.ratio_credit != 1"
              >积分支付</van-radio
            >
          </van-radio-group>
        </div>
        <div style="display: flex;justify-content: center;">
          <div @click="createOrder" class="gopay">
            去支付
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'coupon',
  props: {},
  data() {
    return {
      radio: '1',
      activityId: '',
      acDetail: '',
      payShow: false,
    };
  },
  methods: {
    goPay(activityId) {
      this.activityId = activityId;

      var that = this;
      this.$loading('正在加载...');
      Promise.all([this.getUserInfo(), this.getActivityInfo()])
        .then(() => {
          that.$loading().close();
          if (
            that.acDetail.mobile_verify == '1' &&
            that.userinfo.mobile == ''
          ) {
            // console.log('需要手机验证');
            that.payShow = false;
            that.$router.push({
              name: 'login',
              query: {
                activityid: 0,
                logo: that.acDetail.market.logo,
                name: that.acDetail.market.market_name,
              },
            });
          }
        })
        .catch(err => {
          that.$loading().close();
        });
    },
    getUserInfo() {
      return this.$api
        .userinfo({ activity_id: this.activityId })
        .then(res => {
          if (res.code == 200) {
            this.userinfo = res.data;
            localStorage['user'] = JSON.stringify(this.userinfo);
          } else {
            if (res.code == 401) {
              localStorage.removeItem('mobile');
            }
          }
        })
        .catch(err => {});
    },
    getActivityInfo() {
      var that = this;
      return this.$api
        .getPingActivityInfo({
          activity_id: this.$route.query.id,
        })
        .then(data => {
          if (data.code == 200) {
            let acDetail = data.data;

            that.acDetail = acDetail;

            // 需要支付
            if (acDetail.pay_state == 1) {
              if (parseFloat(acDetail.price) <= 0) {
                // console.log('价格为0 不需要支付');
                that.createOrder();
              } else {
                // console.log('价格为' + acDetail.price + ' 需要支付');
                that.payShow = true;
              }
            } else if (acDetail.pay_state == 2) {
              // 不需要支付，有可能他支付过了，也有可能是免费的
              // console.log('他支付过了 不需要支付');
              that.$emit('sucesspay', { orderid: acDetail.order_id });
            }
          }
        })
        .catch(error => {
          console.log(error);
          this.$toast('网络错误');
        });
    },
    createOrder() {
      this.$loading('正在加载...');
      var that = this;
      this.$api
        .createOrder({
          activity_id: this.activityId,
          point: this.radio == 3 ? this.userinfo.score : 0,
          trade_type: this.radio,
          open_id: localStorage['openid'],
          type: 2,
        })
        .then(data => {
          that.$loading().close();
          if (data.code == 200) {
            let order = data.data;
            if (order.status == '1') {
              that.wechatPay(order);
            } else {
              that.onClose();
              that.$emit('sucesspay', { orderid: order.order_id });
            }
          }
        })
        .catch(error => {
          that.$loading().close();
          console.log(error);
          this.$toast('网络错误');
        });
    },
    wechatPay(data) {
      var that = this;
      // const { appId, timestamp, nonceStr, signType, paySign } = data.wx;
      /* eslint-disable no-undef */
      WeixinJSBridge.invoke('getBrandWCPayRequest', data.wx, function(res) {
        if (res.err_msg == 'get_brand_wcpay_request:ok') {
          that.$emit('sucesspay', { orderid: data.data.order_id });
          that.onClose();
        } else {
          that.$toast('支付失败，请稍后重试');
        }
      });
    },
    onClose() {
      this.payShow = false;
    },
  },
};
</script>

<style scoped lang="scss">
.pay {
  text-align: center;
  padding: 40px;
}

.ops {
  padding: 0 150px;
  text-align: center;
  display: flex;
  justify-content: center;
}

.gopay {
  width: 70%;
  margin-top: 40px;
  height: 80px;
  background-image: linear-gradient(
    0deg,
    #f36865 1%,
    #f54845 16%,
    #f39090 100%
  );
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.4);
  border-radius: 45px;
  line-height: 80px;
  color: white;
}

.van-radio {
  margin-bottom: 20px;
}

.cash {
  font-weight: bold;
  font-size: 60px;
  color: #444;
  border-bottom: #ebebeb 1px solid;
  margin-bottom: 40px;
  line-height: 120px;
}
</style>
